$(function () {
  // let yusername = true;//用户名
  // let yemail = true;//邮箱
  // let ypass = true;//密码
  // let yrepass = true;//确认密码
  // let yphone = true;//手机号码


  // 提交按钮为一张图片，等全部信息填写正确后，才会显示让你提交的按钮
  function check () {
    var che = $('.che');
    if (che.length == 8) {
      $('.submit-btn').removeAttr('disabled');
    }
  }


  $("#username").on("input", function () {
    if ($(this).val() !== '') {
      let cartid = /^[\u4e00-\u9fa5]{2,6}$/; //规则
      if (cartid.test($(this).val())) {
        $.ajax({
          type: "post",
          url: "",
          data: {
            checkname: $('#username').val()
          },
          success: function (response) {
            // console.log(response);

            if (response) {
              $(".user-zq").html('用户名已存在，请重新注册用户名');
              $(".user-zq").css('color', 'red');
              $(".user-dui").show();
              $(".user-dui").css({
                'background-position': '-2px -75px'
              })

            } else {
              $("#username").addClass('che');
            }
          }
        });
        $("#username").addClass('che');
        $(this).css('border-color', '#dcdcdc');
        $(".user-zq").html('6-20位字符，可由中文、英文、数字');
        $(".user-zq").css('color', '#aaaaaa');
        $(".user-dui").show();
        $(".user-dui").css({
          'background-position': '-2px -40px'
        })
        yusername = true;
      } else {
        $(".user-zq").html('请输入正确的用户名');
        $(".user-zq").css('color', 'red');
        $(this).css('border-color', '#f22727');
        $(".user-dui").show();
        $(".user-dui").css({
          'background-position': '-2px -75px'
        })
        yusername = false;
      }
    } else {
      $(".user-zq").html('用户名不能为空');
      $(this).css('border-color', '#f22727');
      yusername = false;
    }
  })


  //邮箱
  $("#email").on("input", function () {
    if ($(this).val() !== '') {
      let emailreg = /^(\w+[+-._]*\w+)\@(\w+[+-.]*\w+)\.(\w+[+-.]*\w+)$/; //规则
      if (emailreg.test($(this).val())) {

        $("#email").addClass('che');
        $(this).css('border-color', '#dcdcdc');
        $(".email-zq").html('请输入常用邮箱，可用作登录账户，接受订单通知和找回密码之用');
        $(".email-zq").css('color', '#aaaaaa');
        $(".email-dui").show();
        $(".email-dui").css({
          'background-position': '-2px -40px'
        })
        yemail = true;
      } else {
        $(this).css('border-color', '#f22727');
        $(".email-zq").html('请输入正确的邮箱');
        $(".email-zq").css('color', 'red');
        $(this).css('border-color', '#f22727');
        $(".email-dui").show();
        $(".email-dui").css({
          'background-position': '-2px -75px'
        })
        yemail = false;
      }
    } else {
      $(this).css('border-color', '#f22727');
      $(".email-zq").html('邮箱不能为空');
      $(this).css('border-color', '#f22727');
      yemail = false;
    }

  })


  //密码强度(1种字符：弱   2种-3种字符：中   4种字符：强)
  //数字  大写字母  小写字符   特殊字符

  $("#password").on("input", function () {
    let num = 0; //记录字符串中字符的种类
    let numreg = /\d+/;
    let uppercase = /[A-Z]+/;
    let lowercase = /[a-z]+/;
    let othercase = /[\W\_]+/;
    if (numreg.test($(this).val())) {
      num++;
    }
    if (uppercase.test($(this).val())) {
      num++;
    }
    if (lowercase.test($(this).val())) {
      num++;
    }
    if (othercase.test($(this).val())) {
      num++;
    }
    if ($(this).val() !== '') {
      switch (num) {
        case 1:
          $(".password-strength i").css('background', '#5dbcfa');
          ypass = false;
          break;
        case 2:
          $(".password-strength span").css('background', '#3d9fdf');
          ypass = true;
          break;
        case 3:
          $(".password-strength u").css('background', '#1b84c8');
          ypass = true;
          break;
        case 4:
          $(".password-strength s").css('background', '#006aaf');
          ypass = true;
          break;

      }
    } else {
      $(".password-strength i").css('background', '#d0d0d0');
      $(".password-strength span").css('background', '#d0d0d0');
      $(".password-strength u").css('background', '#d0d0d0');
      $(".password-strength s").css('background', '#d0d0d0');

    }

  })


  $("#password").on("blur", function () {
    if ($(this).val() !== '') { //不为空
      if ($(this).val().length >= 6 && $(this).val().length <= 20) { //长度
        if (ypass) {
          $("#password").addClass('che');
          $(this).css('border-color', '#dcdcdc');
          $(".password-box-zq").html('6-20位字符，可由大小写英文、数字或符号“-”“_”组成');
          $(".password-box-zq").css('color', '#aaaaaa');
          $(".password-dui").show();
          $(".password-dui").css({
            'background-position': '-2px -40px'
          })
          $("#dbpwd").val('');
          $("#dbpwd").focus();
          ypass = true;

        } else {
          $(this).css('border-color', '#f22727');
          $(".password-box-zq").html('密码安全不够，请重新设置。');
          $(".password-box-zq").css('color', 'red');
          $(this).css('border-color', '#f22727');
          $(".password-dui").show();
          $(".password-dui").css({
            'background-position': '-2px -75px'
          })

          ypass = false;
        }
      } else {
        $(this).css('border-color', '#f22727');
        $(".password-box-zq").html('密码长度有误');
        $(".password-box-zq").css('color', 'red');
        $(".password-dui").show();
        $(".password-dui").css({
          'background-position': '-2px -75px'
        })
        ypass = false;
      }
    } else {
      $(this).css('border-color', '#f22727');
      $(".password-box-zq").html('密码不能为空');
      $(".password-box-zq").css('color', 'red');
    }
  })



  // console.log($("#password2-box")[0]);
  //密码重复
  $("#dbpwd").on("focus", function () {

    if ($(this).val() === '') {
      $(".affirm-dui").hide();
      $(".password2-box-zq").html('确认密码不能为空');
      $(".password2-box-zq").css('color', 'red');
      yrepass = false;
    }
  })

  $("#dbpwd").on("input", function () {
    if ($(this).val() !== '') {
      $(".password2-box-zq").html('');
      $(".affirm-dui").show();
      $(".affirm-dui").css({
        'background-position': '-2px -75px'
      })
    } else {
      if ($(this).val() === '') {
        $(".affirm-dui").show();
        $(".affirm-dui").css({
          'background-position': '-2px -75px'
        })
      }
    }
  })

  $("#dbpwd").on("blur", function () {
    if ($(this).val() !== '') {
      if ($(this).val() === $("#password").val()) {
        $("#dbpwd").addClass('che');
        $(this).css('border-color', '#dcdcdc');
        $(".password2-box-zq").css('color', '#aaaaaa');
        $(".password2-box-zq").html('密码验证成功');
        $(".affirm-dui").show();
        $(".affirm-dui").css({
          'background-position': '-2px -40px'
        })
        yrepass = true;
      } else {
        $(this).css('border-color', '#f22727');
        $(".password2-box-zq").html('两次密码不一致');
        $(".password2-box-zq").css('color', 'red');
        $(".affirm-dui").show();
        $(".affirm-dui").css({
          'background-position': '-2px -75px'
        })
        yrepass = false;
      }
    } else {
      $(".password2-box-zq").html('确认密码不能为空');
      $(".password2-box-zq").css('color', 'red');

      yrepass = false;
    }

  })



  //手机号码：

  $("#phone").on("focus", function () {
    if ($(this).val() === '') {
      $(".phone-box-zq").html('请输入手机号码');
      $(".phone-box-zq").css('color', 'red');
      telflag = false;
    }
  })

  $("#phone").on("input", function () {
    if ($(this).val() !== '') {
      $(".phone-box-zq").html('');
    }
  })

  $("#phone").on("blur", function () {
    if ($(this).val() !== '') {
      let tel = /^1[34578]\d{9}$/; //规则
      if (tel.test($(this).val())) {
        $("#phone").addClass('che');
        $(this).css('border-color', '#dcdcdc');
        $(".phone-box-zq").css('color', '#aaaaaa');
        $(".phone-box-zq").html('');
        $(".phone-dui").show();
        $(".yan-text").focus();
        $(".phone-dui").css({
          'background-position': '-2px -40px'
        })
        yphone = true;
      } else {
        $(this).css('border-color', '#f22727');
        $(".phone-box-zq").html('请输入正确格式的手机号码');
        $(".phone-box-zq").css('color', 'red');
        $(".phone-dui").show();
        $(".phone-dui").css({
          'background-position': '-2px -75px'
        })
        yphone = false;
      }
    } else {
      $(this).css('border-color', '#f22727');
      $(".phone-box-zq").html('手机号码不能为空');
      $(".phone-box-zq").css('color', 'red');
      yphone = false;
    }

  })



  // 6. 验证码
  // 6.1 封装一个函数产生随机数

  function getNum (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function yzm () {
    var str = '';
    for (var i = 0; i < 6; i++) {
      var num = getNum(1, 3);
      switch (num) {
        case 1:
          str += String.fromCharCode(getNum(48, 57));
          break;
        case 2:
          str += String.fromCharCode(getNum(65, 90));
          break;
        case 3:
          str += String.fromCharCode(getNum(97, 122));
          break;
      }
    }
    return str;
  }

  var dig = yzm();

  $(".yan-text").on("focus", function () {
    $('.yan-code').css({
      'background': '',
      'color': '#666'
    })
    $('.yan-code').html(dig);
  })

  $('.yan-code').on("click", function () {
    $('.yan-code').html(dig);
  })

  $(".yan-text").on("blur", function () {
    if ($(".yan-text").val() == $('.yan-code').text()) {
      $(".yan-p").html('');
      $(".yan-dui").show();
      $(".yan-dui").css({
        'background-position': '-2px -40px'
      })
      $(".yan-text").addClass('che');
      check();
    } else {
      $(".yan-p").html('验证码输入错误，请重输');
      $(".yan-p").css('color', 'red');
      $(".yan-dui").show();
      $(".yan-dui").css({
        'background-position': '-2px -75px'
      })
      check();
    }
  })

  // $inps[5].onblur = function () {
  //     if ($inps[5].value.toLowerCase() == dig.toLowerCase()) {
  //         $('.y6').html('');
  //         $('.y6').css({
  //             'background': "url('https://i0.ulecdn.com/i/login/2016/0808/icon.jpg') no-repeat",
  //             'background-position': '-2px -29px'
  //         });
  //         $('.y6').addClass('che');
  //     } else {
  //         $('.y6').html('验证码输入错误，请重输');
  //         $('.y6').css({
  //             'background': "url('https://i0.ulecdn.com/i/login/2016/0808/icon.jpg') no-repeat",
  //             'background-position': '-2px -64px',
  //             'color': '#c52e15'
  //         });
  //         check();
  //     }














  // 全部填写正确在加上复选框勾上才可以提交表单


  $('#feed-checkbox').on('click', function () {
    $(this).addClass('che');
    check();
  })

  $('#agreement-checkbox').on('click', function () {
    $(this).addClass('che');
    check();
  })


  var username = $('#username');
  var password = $('#password');
  var dbpwd = $('#dbpwd');
  var email = $('#email');
  var phone = $('#phone');

  // 信息提交到数据库
  $('.submit-btn').on('click', function () {
    // console.log(1);
    $.ajax({
      type: "post",
      url: "http://127.0.0.1:8080/1907/shanmu/php/zhuce.php",
      data: {
        username: username.val(),
        password: password.val(),
        email: email.val(),
        phone: phone.val(),
        submit: 'submit'
      },
      success: function (res) {
        console.log(res);
        if (res) location.href = 'http://127.0.0.1:8080/1907/shanmu/html/shoue.html';
        //如果成功跳转到 首页
      },
      error: function (xhr) {
        // console.log(xhr)
      }
    });
  })








  //控制提交--form+submit
  // $(".oForm").on("submit", function () {
  //     if ($("#username").val() === '') {
  //         $(".user-zq").html('用户名不能为空');
  //         $(".user-zq").css('color', 'red');
  //         yusername = false;
  //     }
  //     if ($("#email").val() === '') {
  //         $(".email-zq").html('邮箱不能为空');
  //         $(".email-zq").css('color', 'red');
  //         yemail = false;
  //     }
  //     if ($("#password").val() === '') {
  //         $(".password-box-zq").html('密码不能为空');
  //         $(".password-box-zq").css('color', 'red');
  //         ypass = false;
  //     }
  //     if ($("#dbpwd").val() === '') {
  //         $(".password2-box-zq").html('确认密码不能为空');
  //         $(".password2-box-zq").css('color', 'red');
  //         yrepass = false;
  //     }

  //     if ($("#phone").val() === '') {
  //         $(".phone-box-zq").html('手机号码不能为空');
  //         $(".phone-box-zq").css('color', 'red');
  //         yphone = false;
  //     }

  //     if (!yusername || !yemail || !ypass || !yrepass || !yphone) { //阻止
  //         return false;
  //     }
  // })

  // $.md5("Hello,Liehuo.Net");


  //控制提交--form+submit
  // oForm.onsubmit = function () { //提交
  //     if (aInput[0].value === '') {
  //         aSpan[0].innerHTML = '身份证号码不能为空';
  //         aSpan[0].style.cssText = 'color:red;';
  //         cartflag = false;
  //     }
  //     if (aInput[1].value === '') {
  //         aSpan[1].innerHTML = '邮箱不能为空';
  //         aSpan[1].style.cssText = 'color:red;';
  //         emailflag = false;
  //     }
  //     if (aInput[2].value === '') {
  //         aSpan[2].innerHTML = '密码不能为空';
  //         aSpan[2].style.cssText = 'color:red;';
  //         passflag = false;
  //     }
  //     if (aInput[3].value === '') {
  //         aSpan[3].innerHTML = '密码重复不能为空';
  //         aSpan[3].style.cssText = 'color:red;';
  //         repassflag = false;
  //     }

  //     if (aInput[4].value === '') {
  //         aSpan[4].innerHTML = '手机号码不能为空';
  //         aSpan[4].style.cssText = 'color:red;';
  //         telflag = false;
  //     }

  //     if (!cartflag || !emailflag || !passflag || !repassflag || !telflag) { //阻止
  //         return false;
  //     }
  // };









})